<template>
  <div style="width:100%;height:350px;"
       id="alarmPie"></div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'alarmPie',
  props: {
    dataSource: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {}
  },
  watch: {
    dataSource(curVal, oldVal) {
      this.$nextTick(() => {
        this.initEchats()
      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initEchats()
    })
  },
  methods: {
    initEchats() {
      var alarmChart = echarts.init(document.getElementById('alarmPie'))
      var lengendData = []
      var seriesData = []
      for (let i = 0; i < this.dataSource.length; i++) {
        let dataItem = this.dataSource[i]
        if (dataItem.alarm_type !== 'total') {
          lengendData.push(dataItem.alarm_type)
          seriesData.push({
            value: dataItem.alarm_count,
            name: dataItem.alarm_type
          })
        }
      }
      let option = {
        color: [
          '#5867dd',
          '#fd27eb',
          '#6610f2',
          '#6f42c1',
          '#e83e8c',
          '#dc3545',
          '#1dc9b7',
          '#2786fb',
          '#ffb822',
          '#fd7e14',
          '#ffc107',
          '#28a745',
          '#20c997',
          '#17a2b8',
          '#e1e1ef',
          '#007bff'
        ],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        // legend: {
        //   orient: "vertical",
        //   x: "right",
        //   data: lengendData
        // },
        series: [
          {
            name: '报警类型',
            type: 'pie',
            clockwise: false, //饼图的扇区是否是顺时针排布
            minAngle: 2, //最小的扇区角度（0 ~ 360）
            radius: ['40%', '70%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              //图形样式
              normal: {
                borderColor: '#ffffff',
                borderWidth: 6
              }
            },
            label: {
              normal: {
                show: false,
                position: 'center',
                formatter: '{text|{b}}\n{c} ({d}%)',
                rich: {
                  text: {
                    color: '#666',
                    fontSize: 14,
                    align: 'center',
                    verticalAlign: 'middle',
                    padding: 8
                  },
                  value: {
                    color: '#8693F3',
                    fontSize: 24,
                    align: 'center',
                    verticalAlign: 'middle'
                  }
                }
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: 24
                }
              }
            },
            data: seriesData
          }
        ]
      }

      alarmChart.setOption(option)
      setTimeout(function() {
        alarmChart.on('mouseover', function(params) {
          if (params.name == seriesData[0].name) {
            alarmChart.dispatchAction({
              type: 'highlight',
              seriesIndex: 0,
              dataIndex: 0
            })
          } else {
            alarmChart.dispatchAction({
              type: 'downplay',
              seriesIndex: 0,
              dataIndex: 0
            })
          }
        })

        alarmChart.on('mouseout', function(params) {
          alarmChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: 0
          })
        })
        alarmChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: 0
        })
      }, 1000)
      window.addEventListener('resize', function() {
        alarmChart.resize()
      })
    }
  }
}
</script>
